<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="700" height="500"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
ctx.font = '18px sans-serif';
ctx.textBaseline = 'middle';

// --- Helper Functions ---
function drawCross(x, y, radius) {
    ctx.save();
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    const d = radius * Math.cos(Math.PI / 4);
    ctx.moveTo(x - d, y - d);
    ctx.lineTo(x + d, y + d);
    ctx.moveTo(x + d, y - d);
    ctx.lineTo(x - d, y + d);
    ctx.stroke();
    ctx.restore();
}

// --- Main Drawing ---

// 1. Draw Magnetic Field
const crossRadius = 10;
const gridCols = 5;
const gridRows = 4;
const xStart = 150;
const yStart = 80;
const xStep = 100;
const yStep = 90;

for (let i = 0; i < gridCols; i++) {
    for (let j = 0; j < gridRows; j++) {
        drawCross(xStart + i * xStep, yStart + j * yStep, crossRadius);
    }
}

// 2. Draw the Square Coil
const coilSide = 180;
const coilX = 250;
const coilY = 125;
ctx.save();
ctx.lineWidth = 3;
ctx.lineJoin = 'miter';
ctx.strokeRect(coilX, coilY, coilSide, coilSide);
ctx.restore();

// 3. Draw Dimension Line
const dimLineX = 180;
const dimTextX = 170;

ctx.beginPath();
// Dashed lines
ctx.setLineDash([5, 5]);
ctx.moveTo(coilX, coilY);
ctx.lineTo(dimLineX, coilY);
ctx.moveTo(coilX, coilY + coilSide);
ctx.lineTo(dimLineX, coilY + coilSide);
ctx.stroke();
ctx.setLineDash([]);

// Vertical line
ctx.beginPath();
ctx.moveTo(dimLineX, coilY);
ctx.lineTo(dimLineX, coilY + coilSide);
ctx.stroke();

// Arrows
ctx.beginPath();
// Top arrow
ctx.moveTo(dimLineX - 5, coilY + 8);
ctx.lineTo(dimLineX, coilY);
ctx.lineTo(dimLineX + 5, coilY + 8);
// Bottom arrow
ctx.moveTo(dimLineX - 5, coilY + coilSide - 8);
ctx.lineTo(dimLineX, coilY + coilSide);
ctx.lineTo(dimLineX + 5, coilY + coilSide - 8);
ctx.stroke();

// Text
ctx.textAlign = 'right';
ctx.fillText('12 cm', dimTextX, coilY + coilSide / 2);


// 4. Draw Terminals and Wires
const wireStartX = coilX;
const wireStartY = coilY + coilSide;
ctx.beginPath();
ctx.lineWidth = 1.5;
// Left wire
ctx.moveTo(wireStartX, wireStartY);
ctx.quadraticCurveTo(wireStartX - 25, wireStartY + 55, wireStartX - 10, wireStartY + 85);
// Right wire
ctx.moveTo(wireStartX, wireStartY);
ctx.quadraticCurveTo(wireStartX + 25, wireStartY + 55, wireStartX + 30, wireStartY + 85);
ctx.stroke();

// Terminal circles (open circles)
const termRadius = 5;
ctx.beginPath();
ctx.arc(wireStartX - 10, wireStartY + 85, termRadius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(wireStartX + 30, wireStartY + 85, termRadius, 0, 2 * Math.PI);
ctx.stroke();

// Terminal label
ctx.textAlign = 'center';
ctx.fillText('terminals', wireStartX + 10, wireStartY + 110);


// 5. Draw Labels with Pointers

// Coil label
const coilLabelX = 520;
const coilLabelY = 250;
ctx.textAlign = 'left';
ctx.beginPath();
ctx.moveTo(coilLabelX, coilLabelY);
ctx.lineTo(coilX + coilSide, coilY + coilSide * 0.6);
ctx.stroke();
ctx.fillText('square coil', coilLabelX + 5, coilLabelY);
ctx.fillText('8 turns', coilLabelX + 5, coilLabelY + 25);

// Magnetic field label
const fieldLabelX = 520;
const fieldLabelY = 70;
const targetCrossX = xStart + 3 * xStep;
const targetCrossY = yStart;
ctx.beginPath();
ctx.moveTo(fieldLabelX, fieldLabelY);
ctx.lineTo(targetCrossX + crossRadius, targetCrossY);
ctx.stroke();
ctx.fillText('magnetic field lines', fieldLabelX + 5, fieldLabelY);
ctx.fillText('into the page', fieldLabelX + 5, fieldLabelY + 25);

// 6. Draw Figure Caption
ctx.textAlign = 'center';
ctx.fillText('Fig. 6.1', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>